import downloadFile from "../utils/downloadFile";
import { PdfJs } from "../interface";
import Annotation from "./Annotation";
import { FC, ReactElement } from "react";

interface FileAttachmentProps {
  annotation: PdfJs.Annotation;
  page: PdfJs.Page;
  viewport: PdfJs.ViewPort;
}

const FileAttachment: FC<FileAttachmentProps> = ({
  annotation,
  page,
  viewport,
}) => {
  const hasPopup =
    annotation.hasPopup === false &&
    (!!annotation.title || !!annotation.contents);

  const doubleClick = (): void => {
    const file = annotation.file;
    file && downloadFile(file.filename, file.content);
  };

  return (
    <Annotation
      annotation={annotation}
      hasPopup={hasPopup}
      ignoreBorder={true}
      isRenderable={true}
      page={page}
      viewport={viewport}
    >
      {(props): ReactElement => (
        <div
          {...props.slot.attrs}
          className="rpv-core__annotation rpv-core__annotation--file-attachment"
          data-annotation-id={annotation.id}
          onClick={props.popup.toggleOnClick}
          onDoubleClick={doubleClick}
          onMouseEnter={props.popup.openOnHover}
          onMouseLeave={props.popup.closeOnHover}
        >
          {props.slot.children}
        </div>
      )}
    </Annotation>
  );
};

export default FileAttachment;
